import React, {Component} from 'react';
import PubSub from 'pubsub-js'
import {Menu, Layout, Progress, Space, Image} from 'antd';
import {
    SnippetsOutlined,
    DeleteOutlined,
    MailOutlined,
} from '@ant-design/icons';
import 'antd/dist/antd.css'

const {Sider} = Layout;

export default class MySider extends Component {
    state = {
        totalSize: 0,
    }

    showAll = () => {
        PubSub.publish('File', {Type: 'all'})
    }

    showVideo = () => {
        PubSub.publish('File', {Type: 'video'})
    }

    showDoc = () => {
        PubSub.publish('File', {Type: 'document'})
    }

    showPicture = () => {
        PubSub.publish('File', {Type: 'picture'})
    }

    showAudio = () => {
        PubSub.publish('File', {Type: 'audio'})
    }

    showOthers = () => {
        PubSub.publish('File', {Type: 'others'})
    }

    showFavorite = () => {
        PubSub.publish('File', {Type: 'favorite'})
    }

    showRecycle = () => {
        PubSub.publish('File', {Type: 'recycle'})
    }

    showFeedback = () => {
        alert("邮箱：？？？")
    }

    render() {
        const {totalSize} = this.state
        return (
            <>
                <Sider
                    style={{
                        overflow: 'auto',
                        height: '100vh',
                        position: 'fixed',
                        left: 0,
                        zIndex: 90,
                        backgroundColor: '#F4F4F4',
                        marginTop: "64px"
                    }}
                >
                    <Menu style={{backgroundColor: '#F4F4F4'}} mode="inline" defaultSelectedKeys={['1']}>
                        <Menu.Item className='young' onClick={this.showAll} key="1" icon={<SnippetsOutlined/>}>
                            全部文件
                        </Menu.Item>
                        <Menu.Item className='young' onClick={this.showVideo} key="2">视频</Menu.Item>
                        <Menu.Item className='young' onClick={this.showDoc} key="3">文档</Menu.Item>
                        <Menu.Item className='young' onClick={this.showPicture} key="4">图片</Menu.Item>
                        <Menu.Item className='young' onClick={this.showAudio} key="5">音频</Menu.Item>
                        <Menu.Item className='young' onClick={this.showOthers} key="6">其他</Menu.Item>
                        <Menu.Item className='young' onClick={this.showFavorite} key="7">我的收藏</Menu.Item>
                        <Menu.Item className='young' onClick={this.showRecycle} key="8"
                                   icon={<DeleteOutlined/>}>
                            回收站
                        </Menu.Item>
                        <Menu.Item className='young' onClick={this.showFeedback} key="9" icon={<MailOutlined/>}>
                            反馈
                        </Menu.Item>
                        <Progress style={{left: '5%', width: '90%'}}
                                  percent={Math.ceil(totalSize / 1024 / 1024)}
                                  showInfo={false}/>
                        <div style={{margin: '10px 0 0 5%'}}>{(totalSize / 1024 / 1024).toFixed(2)}G/100G</div>
                    </Menu>
                </Sider>
            </>
        );
    }
}
